npm install webpack webpack-cli webpack-dev-server --save-dev
            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3000/',
 },
 devServer: {
 port: 3000,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: {
 // Define remotes here, e.g., 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 'RemoteApp': 'RemoteApp@http://localhost:3001/remoteEntry.js'
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');

module.exports = {
 mode: 'development',
 devtool: 'source-map',
 entry: './src/index',
 output: {
 publicPath: 'http://localhost:3001/',
 },
 devServer: {
 port: 3001,
 hot: true,
 historyApiFallback: true, // For single page application routing
 },
 module: {
  rules: [
  {
   test: /\.(js|jsx)$/,
   exclude: /node_modules/,
   use: {
    loader: 'babel-loader',
    options: {
     presets: ['@babel/preset-env', '@babel/preset-react']
    }
   }
  },
  {
   test: /\.css$/,
   use: ['style-loader', 'css-loader']
  }
 ]
 },
 plugins: [
 new ModuleFederationPlugin({
 name: 'RemoteApp',
 filename: 'remoteEntry.js',
 exposes: {
 './Widget': './src/Widget',
 // Add other exposed modules here
 },
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

            import React from 'react';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

            import React, { useState, useEffect } from 'react';

const RemoteWidget = React.lazy(() => import('RemoteApp/Widget'));

const App = () => {
 const [isWidgetLoaded, setIsWidgetLoaded] = useState(false);

 useEffect(() => {
  setIsWidgetLoaded(true);
 }, []);

 return (
  

  
Host Application
  
This is the host application.
  {isWidgetLoaded ? (
   Loading Widget...
}>
   
   
  ) : (
   
Loading...
  )}
  

Razlaga:

• React.lazy(() => import('RemoteApp/Widget')): To dinamično uvozi modul Widget iz RemoteApp. Ime RemoteApp ustreza imenu, določenemu v razdelku remotes konfiguracije Webpacka gostitelja. Widget ustreza imenu modula, določenemu v razdelku exposes konfiguracije Webpacka oddaljene aplikacije.
• React.Suspense: Uporablja se za obravnavo asinhronega nalaganja oddaljenega modula. Lastnost fallback določa komponento, ki se prikaže med nalaganjem modula.

6. Zaženite aplikaciji:

Zaženite tako gostiteljsko kot oddaljeno aplikacijo z ukazom npm start (ali vašo preferirano metodo). Prepričajte se, da oddaljena aplikacija teče *pred* gostiteljsko aplikacijo.

Sedaj bi morali videti oddaljeni pripomoček (widget), prikazan znotraj gostiteljske aplikacije.

Napredne tehnike Module Federation

Poleg osnovne nastavitve Module Federation ponuja več naprednih tehnik za gradnjo sofisticiranih arhitektur mikro-frontendov.

1. Upravljanje različic in deljenje:

Učinkovito upravljanje deljenih odvisnosti je ključnega pomena za ohranjanje stabilnosti in preprečevanje konfliktov. Module Federation ponuja mehanizme za določanje obsegov različic in singleton instanc deljenih modulov. Z uporabo lastnosti shared v konfiguraciji Webpacka lahko nadzorujete, kako se deljeni moduli nalagajo in upravljajo.

Primer:

            shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 lodash: { eager: true, version: '4.17.21' }
}

            

              
                Copy
              
            
          

• singleton: true: Zagotavlja, da se naloži samo ena instanca modula, kar preprečuje podvajanje in zmanjšuje velikost svežnja. To je še posebej pomembno za knjižnice, kot sta React in ReactDOM.
• requiredVersion: Določa obseg različic, ki jih aplikacija zahteva. Webpack bo poskušal naložiti združljivo različico modula.
• eager: true: Naloži modul takoj, namesto lenobno. To lahko v nekaterih primerih izboljša delovanje, vendar lahko tudi poveča začetno velikost svežnja.

2. Dinamična Module Federation:

Namesto trdega kodiranja URL-jev oddaljenih aplikacij jih lahko dinamično naložite iz konfiguracijske datoteke ali API končne točke. To vam omogoča posodabljanje arhitekture mikro-frontendov brez ponovnega uvajanja gostiteljske aplikacije.

Primer:

Ustvarite konfiguracijsko datoteko (npr. remote-config.json), ki vsebuje URL-je oddaljenih aplikacij:

            {
 "RemoteApp": "http://localhost:3001/remoteEntry.js",
 "AnotherRemoteApp": "http://localhost:3002/remoteEntry.js"
}

            

              
                Copy
              
            
          

V gostiteljski aplikaciji pridobite konfiguracijsko datoteko in dinamično ustvarite objekt remotes:

            const ModuleFederationPlugin = require('webpack/lib/container/ModuleFederationPlugin');
const path = require('path');
const fs = require('fs');

module.exports = {
 // ... other configurations
 plugins: [
 new ModuleFederationPlugin({
 name: 'Host',
 filename: 'remoteEntry.js',
 remotes: new Promise(resolve => {
  fs.readFile(path.resolve(__dirname, 'remote-config.json'), (err, data) => {
  if (err) {
  console.error('Error reading remote-config.json:', err);
  resolve({});
  } else {
  try {
  const remotesConfig = JSON.parse(data.toString());
  resolve(remotesConfig);
  } catch (parseError) {
  console.error('Error parsing remote-config.json:', parseError);
  resolve({});
  }
  }
  });
 }),
 shared: {
 react: { singleton: true, requiredVersion: '^17.0.0' },
 'react-dom': { singleton: true, requiredVersion: '^17.0.0' },
 // Add other shared dependencies here
 },
 }),
 // ... other plugins
 ],
};

            

              
                Copy
              
            
          

Pomembna opomba: V produkcijskem okolju razmislite o uporabi bolj robustne metode za pridobivanje oddaljene konfiguracije, kot je API končna točka ali namenska konfiguracijska storitev. Zgornji primer za preprostost uporablja fs.readFile, vendar to na splošno ni primerno za produkcijske uvedbe.

3. Strategije nalaganja po meri:

Module Federation vam omogoča prilagajanje načina nalaganja oddaljenih modulov. Implementirate lahko strategije nalaganja po meri za optimizacijo delovanja ali obravnavo posebnih scenarijev, kot je nalaganje modulov iz CDN-ja ali uporaba service workerja.

Webpack izpostavlja "hooks", ki vam omogočajo, da prestrežete in spremenite postopek nalaganja modulov. To omogoča natančen nadzor nad tem, kako se oddaljeni moduli pridobivajo in inicializirajo.

4. Obravnavanje CSS-a in stilov:

Deljenje CSS-a in stilov med mikro-frontendi je lahko zapleteno. Module Federation podpira različne pristope za obravnavanje stilov, vključno z:

• CSS moduli: Uporabite CSS module za enkapsulacijo stilov znotraj vsakega mikro-frontenda, s čimer preprečite konflikte in zagotovite doslednost.
• Styled Components: Uporabite "styled components" ali druge CSS-in-JS knjižnice za upravljanje stilov znotraj samih komponent.
• Globalni stili: Naložite globalne stile iz deljene knjižnice ali CDN-ja. Bodite previdni pri tem pristopu, saj lahko pride do konfliktov, če stili niso pravilno ločeni z imenskimi prostori.

Primer uporabe CSS modulov:

Konfigurirajte Webpack za uporabo CSS modulov:

            module: {
 rules: [
 {
 test: /\.module\.css$/,
 use: [
 'style-loader',
 {
 loader: 'css-loader',
 options: {
 modules: {
 localIdentName: '[name]__[local]--[hash:base64:5]',
 },
 importLoaders: 1,
 },
 },
 'postcss-loader',
 ],
 },
 // ... other rules
],
}

            

              
                Copy
              
            
          

Uvozite CSS module v svoje komponente:

            import React from 'react';
import styles from './Widget.module.css';

const Widget = () => {
 return (
  

  
Remote Widget
  
This is a widget from the RemoteApp.
  
 );
};

export default Widget;

            

              
                Copy
              
            
          

5. Komunikacija med mikro-frontendi:

Mikro-frontendi pogosto potrebujejo medsebojno komunikacijo za izmenjavo podatkov ali sprožanje dejanj. To lahko dosežete na več načinov:

• Deljeni dogodki: Uporabite globalno vodilo dogodkov (event bus) za objavljanje in naročanje na dogodke. To omogoča mikro-frontendom asinhrono komunikacijo brez neposrednih odvisnosti.
• Dogodki po meri: Uporabite DOM dogodke po meri za komunikacijo med mikro-frontendi na isti strani.
• Deljeno upravljanje stanja: Uporabite knjižnico za deljeno upravljanje stanja (npr. Redux, Zustand) za centralizacijo stanja in olajšanje deljenja podatkov.
• Neposredni uvozi modulov: Če so mikro-frontendi tesno povezani, lahko module uvozite neposredno drug od drugega z uporabo Module Federation. Vendar je treba ta pristop uporabljati zmerno, da se izognete ustvarjanju odvisnosti, ki spodkopavajo prednosti mikro-frontendov.
• API-ji in storitve: Mikro-frontendi lahko komunicirajo med seboj prek API-jev in storitev, kar omogoča ohlapno povezovanje in večjo prilagodljivost. To je še posebej uporabno, kadar so mikro-frontendi uvedeni na različnih domenah ali imajo različne varnostne zahteve.

Prednosti uporabe Module Federation za mikro-frontende

• Izboljšana razširljivost: Mikro-frontende je mogoče neodvisno razširjati, kar vam omogoča dodeljevanje virov tja, kjer so najbolj potrebni.
• Povečana vzdrževnost: Manjše kodne baze so lažje za razumevanje in vzdrževanje, kar zmanjšuje tveganje za napake in izboljšuje produktivnost razvijalcev.
• Hitrejši cikli uvajanja: Mikro-frontende je mogoče uvajati neodvisno, kar omogoča hitrejše iteracijske cikle in hitrejše izdajanje novih funkcij.
• Tehnološka raznolikost: Ekipe lahko izberejo tehnologije in ogrodja, ki najbolje ustrezajo njihovim potrebam, kar spodbuja inovacije in omogoča uporabo specializiranih znanj.
• Povečana avtonomija ekip: Vsak mikro-frontend je v lasti namenske ekipe, kar spodbuja lastništvo in odgovornost.
• Poenostavljeno uvajanje: Novi razvijalci se lahko hitro seznanijo z manjšimi in bolj obvladljivimi kodnimi bazami.

Izzivi uporabe Module Federation

• Povečana kompleksnost: Arhitekture mikro-frontendov so lahko bolj kompleksne od tradicionalnih monolitnih arhitektur in zahtevajo skrbno načrtovanje in koordinacijo.
• Upravljanje deljenih odvisnosti: Upravljanje deljenih odvisnosti je lahko zahtevno, še posebej, če različni mikro-frontendi uporabljajo različne različice iste knjižnice.
• Dodatni stroški komunikacije: Komunikacija med mikro-frontendi lahko povzroči dodatne obremenitve in zakasnitve.
• Integracijsko testiranje: Testiranje integracije mikro-frontendov je lahko bolj zapleteno kot testiranje monolitne aplikacije.
• Začetni stroški nastavitve: Konfiguriranje Module Federation in postavitev začetne infrastrukture lahko zahtevata znaten napor.

Primeri in primeri uporabe iz resničnega sveta

Module Federation uporablja vse večje število podjetij za gradnjo velikih in kompleksnih spletnih aplikacij. Tukaj je nekaj primerov in primerov uporabe iz resničnega sveta:

• Platforme za e-trgovino: Velike platforme za e-trgovino pogosto uporabljajo mikro-frontende za upravljanje različnih delov spletnega mesta, kot so katalog izdelkov, nakupovalna košarica in postopek zaključka nakupa. Na primer, nemški trgovec lahko uporablja ločen mikro-frontend za prikaz izdelkov v nemščini, medtem ko francoski trgovec uporablja drug mikro-frontend za francoske izdelke, oba pa sta integrirana v eno samo gostiteljsko aplikacijo.
• Finančne institucije: Banke in finančne institucije uporabljajo mikro-frontende za gradnjo kompleksnih bančnih aplikacij, kot so portali za spletno bančništvo, naložbene platforme in sistemi za trgovanje. Globalna banka ima lahko ekipe v različnih državah, ki razvijajo mikro-frontende za različne regije, pri čemer je vsak prilagojen lokalnim predpisom in preferencam strank.
• Sistemi za upravljanje vsebine (CMS): Platforme CMS lahko uporabljajo mikro-frontende, da uporabnikom omogočijo prilagajanje videza in funkcionalnosti svojih spletnih mest. Na primer, kanadsko podjetje, ki ponuja storitve CMS, lahko uporabnikom omogoči dodajanje ali odstranjevanje različnih mikro-frontendov (pripomočkov) na svojo spletno stran, da prilagodijo njeno funkcionalnost.
• Nadzorne plošče in analitične platforme: Mikro-frontendi so zelo primerni za gradnjo nadzornih plošč in analitičnih platform, kjer lahko različne ekipe prispevajo različne pripomočke in vizualizacije.
• Aplikacije v zdravstvu: Ponudniki zdravstvenih storitev uporabljajo mikro-frontende za gradnjo portalov za paciente, sistemov za elektronske zdravstvene kartoteke (EHR) in platform za telemedicino.

Najboljše prakse za implementacijo Module Federation

Da bi zagotovili uspeh vaše implementacije Module Federation, sledite tem najboljšim praksam:

• Skrbno načrtujte: Preden začnete, skrbno načrtujte svojo arhitekturo mikro-frontendov in določite jasne meje med različnimi aplikacijami.
• Vzpostavite jasne komunikacijske kanale: Vzpostavite jasne komunikacijske kanale med ekipami, ki so odgovorne za različne mikro-frontende.
• Avtomatizirajte uvajanje: Avtomatizirajte postopek uvajanja, da zagotovite hitro in zanesljivo uvajanje mikro-frontendov.
• Spremljajte delovanje: Spremljajte delovanje vaše arhitekture mikro-frontendov, da prepoznate in odpravite morebitna ozka grla.
• Implementirajte robustno obravnavo napak: Implementirajte robustno obravnavo napak, da preprečite kaskadne napake in zagotovite, da aplikacija ostane odporna.
• Uporabljajte dosleden slog kode: Uveljavite dosleden slog kode v vseh mikro-frontendih, da izboljšate vzdrževnost.
• Dokumentirajte vse: Dokumentirajte svojo arhitekturo, odvisnosti in komunikacijske protokole, da zagotovite, da je sistem dobro razumljen in vzdrževan.
• Upoštevajte varnostne posledice: Skrbno pretehtajte varnostne posledice vaše arhitekture mikro-frontendov in implementirajte ustrezne varnostne ukrepe. Zagotovite skladnost z globalnimi predpisi o zasebnosti podatkov, kot sta GDPR in CCPA.

Zaključek

JavaScript Module Federation z Webpack 5 ponuja močan in prilagodljiv način za gradnjo arhitektur mikro-frontendov. Z razgradnjo velikih aplikacij na manjše, neodvisno uvedljive enote lahko izboljšate razširljivost, vzdrževnost in avtonomijo ekip. Čeprav so z implementacijo mikro-frontendov povezani izzivi, prednosti pogosto odtehtajo stroške, še posebej pri kompleksnih spletnih aplikacijah. S sledenjem najboljšim praksam, opisanim v tem vodniku, lahko uspešno izkoristite Module Federation za gradnjo robustnih in razširljivih arhitektur mikro-frontendov, ki ustrezajo potrebam vaše organizacije in uporabnikov po vsem svetu.